<template>
    <div class="page-container">
        <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="小程序模板" name="0" :class="[activeName == 0?'blueBg':'']"></el-tab-pane>
            <el-tab-pane label="小程序发布" name="1" :class="[activeName == 1?'blueBg':'']"></el-tab-pane>
        </el-tabs>
        <div class="container-item">
            <template v-if="activeName == 0">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span></span>
                            <el-button class="button" type="primary" >保 存</el-button>
                        </div>
                    </template>
                    <div>
                        <el-form :model="form" size="small">
                            <el-form-item label="选择主题模板:">
                                <el-radio-group v-model="form.tempId" @change="selectTemp">
                                    <el-radio v-for="(item, index) in tempOptions" :label="item.id" :key="index">{{ item.tempName }}
                                    </el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="模板展示:">
                                <el-image style="width: 250px; height: 500px" :src="form.previewUrl" />
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>
            </template>
            <template v-if="activeName == 1">
                <div class="card-center">
                    <!-- 开通小程序 -->
                    <el-card class="box-card" style="width: 318px; height: 515px; margin-right: 20px; position: relative;">
                        <div style="display: flex; justify-content: center; height: 100px; margin: 20px 0;">
                            <img src="https://17work-1304122643.cos.ap-guangzhou.myqcloud.com/17work/0/20230610/4F7914788BC2413B91FCB1ECA3C83989.png" style="width: 100px; height: 100px;" >
                        </div>
                        <div style="text-align: center; font-size: 24px; font-weight: bold; margin-bottom: 40px;">开通微信小程序</div>
                        <div class="text-info">
                            <span class="left-text">适用场景</span>
                            <span class="right-text">未开通微信小程序，想快速体验再认证</span>
                        </div>
                        <div class="text-info">
                            <span class="left-text">授权流程</span>
                            <span class="right-text">填写企业相关信息，免300元且快速注册小程序</span>
                        </div>
                        <el-button @click="goRegister" style="width: 276px; position: absolute; height: 50px; bottom: 40px; background-color: #fe714b; border-color: #fe714b; color: azure;">
                            <div style="display: flex; flex-direction: column;">
                                <div style="font-size: 15px; margin-bottom: 5px;">免300元微信认证费</div>
                                <div>快速注册</div>
                            </div>
                        </el-button>
                    </el-card>
                    <!-- 授权小程序 -->
                    <el-card class="box-card" style="width: 318px; height: 515px; margin-left: 20px; position: relative;">
                        <div style="display: flex; justify-content: center;  height: 100px; margin: 20px 0;">
                            <img src="https://17work-1304122643.cos.ap-guangzhou.myqcloud.com/17work/0/20230610/65E027F4B6754B3A8CF6D27156BA33AE.png" style="width: 90px; height: 90px;" >
                        </div>
                        <div style="text-align: center; font-size: 24px; font-weight: bold; margin-bottom: 40px;">授权已认证小程序</div>
                        <div class="text-info">
                            <span class="left-text">适用场景</span>
                            <span class="right-text">已注册的企业主体微信小程序并完成微信认证</span>
                        </div>
                        <div class="text-info">
                            <span class="left-text">授权流程</span>
                            <span class="right-text">扫码后把所有权限统一授权，完成后快速发布上线即可获得商城小程序</span>
                        </div>
                        <el-button style="width: 276px; position: absolute; bottom: 40px;" @click="showAuthClick">立即授权</el-button>
                    </el-card>
                </div>
            </template>
        </div>

        <!-- 注册小程序 -->
        <CreateShopInfo v-if="showCreateModel" v-model:dialogDrawer="showCreateModel"></CreateShopInfo>
        <!-- 授权二维码 -->
        <AuthQRCode v-if="showAuthModel" v-model:dialogDrawer="showAuthModel" v-model:auth-url="authCodeUrl" @onSubmit="loadPage"></AuthQRCode>
    </div>
</template>

<script>
import { reactive, toRefs, nextTick, onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
import { Message } from '@element-plus/icons-vue'
import { getList as getTempList, getMerchantsRelationByMerchantsId, createMerchantsRelation, updateMerchantsRelation } from '/@/api/pms/wechatTemp'
import CreateShopInfo from '../components/CreateShopInfo.vue'
import AuthQRCode from '../components/AuthQRcode.vue'
import api from '/@/api/commonApi'

export default {
    name: 'wechatApplet',
    components: {
        CreateShopInfo,
        AuthQRCode
    },
    setup(props) {
        const route = useRoute()
        const state = reactive({
            activeName: '0',
            tempOptions: [], // 模板
            authCodeUrl: '',
            form: {},
            showCreateModel: false,
            showAuthModel: false,
        })
        // 初始化
        const getList = () => {
            getTempList().then(res => {
                state.tempOptions = res.data
                getMerchantsRelationByMerchantsId(0).then(res => {
                    if (res.data != null) {
                        state.form = res.data
                        selectTemp(state.form.tempId)
                    }else{
                        // 获取默认的
                        let r = {
                            previewUrl:'',
                            tempName:'',
                            isCustomize:'',
                            authStatus:'0',
                            tempId:null
                        }
                        for (let t of state.tempOptions) {
                            if (t.isDefault == '1') {
                                r.previewUrl = t.previewUrl
                                r.tempName = t.tempName
                                r.isCustomize = t.isCustomize
                                r.authStatus = "0"
                                r.tempId = t.id
                            }
                        }
                        if(r.tempId ==null){
                            let t = state.tempOptions[0]
                            r.previewUrl = t.previewUrl
                            r.tempName = t.tempName
                            r.isCustomize = t.isCustomize
                            r.authStatus = "0"
                            r.tempId = t.id
                        }
                        state.form = r
                    }
                })
            })
        }
        // 切换模板
        const selectTemp = (val) => {
            for (let t of state.tempOptions) {
                if (t.id == val) {
                    state.form.previewUrl = t.previewUrl
                    state.form.tempName = t.tempName
                    state.form.isCustomize = t.isCustomize
                    state.form.authStatus = "0"
                    state.form.tempId = t.id
                }
            }
        }
        // 快速注册小程序
        const goRegister = () => {
            state.showCreateModel = true
        }
        // 显示授权弹框
        const showAuthClick = () => {
            api.appAuthCodeUrl({ type: 1 }).then(res => {
                // 获取二维码链接
                state.authCodeUrl = res.data
                state.showAuthModel = true
            })

        }


        onMounted(() => {
            getList()
            if(route.query.type != null) {
                state.activeName = route.query.type
            }
        })
        return {
            ...toRefs(state),
            selectTemp,
            goRegister,
            showAuthClick,
        }
    }
}

</script>

<style scoped lang="scss">
    .container-item {
        height: 92vh;
		background: var(--next-color-white);
		padding: 15px;
		border: 1px solid var(--el-border-color-light);
		border-top: none;
        margin-top: -15px;

		
	}

    .blueBg{
        background: blue;
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .card-center {
        height: 92vh;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .text-info {
        display: flex;
        width: 100%;
        box-sizing: border-box;
        padding: 0 0px;
        text-align: left;
        margin: 20px auto;

        .left-text {
            color: #999;
            width: 80px;
        }

        .right-text {
            flex: 1 1;
            line-height: 22px;
        }
    }
</style>

